<template>
  <div>
    <div class="gender">用户分布情况</div>
  </div>
  <div ref="chart" style="width: 300px; height: 200px"></div>
</template>

<script>
import * as echarts from "echarts";
import TopO from "../../../public/imgs/oneONde.png";
import TopW from "../../../public/imgs/fsadsa.png";
import TopTH from "../../../public/imgs/ewew.png";
export default {
  data() {
    return {
      data: {
        index: [1, 2, 3, 4],
        label: ["市内", "市外", "省内", "省外"],
        value: [99, 75, 37, 16],
        value1: [99, 99, 99, 99],
      },
      dataZoomMove: {
        start: 0,
        end: 5,
      },
      dataZoomMoveTimer: null,
      myChart: null,
      option: {},
    };
  },
  mounted() {
    this.fetchChartData();
    this.startMoveDataZoom();
    this.$refs.chart.addEventListener("mouseout", this.handleMouseOut);
    this.$refs.chart.addEventListener("mouseover", this.handleMouseOver);
  },
  methods: {
    async fetchChartData() {
      try {
        const response = await this.$axios.get(
          "/api/survey/economizeGender"
        );
        if (response.data.data) {
          
          this.data.label = response.data.data.label;
          this.data.value = response.data.data.value;
          this.data.value1 = response.data.data.value1;
          this.initChart();
        } else {
          console.error("API request failed:", response.data.msg);
        }
      } catch (error) {
        console.error("Error fetching chart data:", error);
      }
    },
    initChart() {
      this.myChart = this.$echarts.init(this.$refs.chart);
      this.option = this.getChartOption();
      this.myChart.setOption(this.option);
    },
    getChartOption() {
      return {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(21, 154, 255, 0.2)",
          textStyle: {
            color: "#fff",
          },
          borderColor: "#159AFF",
          axisPointer: {
            lineStyle: {
              color: "transparent",
            },
          },
          formatter: "{b0}：{c0}",
        },
        dataZoom: [
          {
            show: false,
            startValue: 0, // 数据窗口范围的起始数值
            endValue: 6, // 数据窗口范围的结束数值（一页显示多少条数据）
            type: "slider",
            maxValueSpan: 6, // 显示数据的条数(默认显示10个)
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            height: "90%", // 组件高度
            width: "2%",
            left: "96%", // 左边的距离
            right: 4, // 右边的距离
            bottom: 10, // 上边边的距离
            borderColor: "#0e426c",
            fillerColor: "#1890ff", // 滑动块的颜色
            backgroundColor: "#0e426c", // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            realtime: true, // 是否实时更新
            filterMode: "filter",
            yAxisIndex: [0, 1, 2], // 控制的y轴
            brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
          },
          {
            type: "inside",
            yAxisIndex: 0,
            zoomOnMouseWheel: false,
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
        grid: {
          containLabel: true,
          bottom: 20,
          left: 15,
          top: 10,
          right: 25,
        },
        xAxis: {
          type: "value",
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        yAxis: [
          {
            type: "category",
            data: this.data.label,
            inverse: true,
            align: "left",
            axisLabel: {
              formatter: (value, index) => {
                // 根据索引返回不同的样式
                let bgStyle = index === 0 ? "TopO" : index === 1 ? "TopW" : index >= 2 ? "TopTH" : "default";
                return `{${bgStyle}| } {label|${index + 1}}`; // 图片和文字
              },
              rich: {
                TopO: {
                  backgroundColor: {
                    image: TopO, // 第一名背景图片
                  },
                  width: 30,
                  height: 20,
                  align: "left", // 左对齐
                },
                TopW: {
                  backgroundColor: {
                    image: TopW, // 第二名背景图片
                  },
                  width: 30,
                  height: 20,
                  align: "left", // 左对齐
                },
                TopTH: {
                  backgroundColor: {
                    image: TopTH, // 第三名背景图片
                  },
                  width: 30,
                  height: 20,
                  align: "left", // 左对齐
                },
                default: {
                  width: 30,
                  height: 20,
                  align: "left", // 左对齐
                  backgroundColor: "rgba(0,0,0,0)", // 透明背景
                },
                label: {
                  fontSize: 12,
                  color: "#fff",
                  padding: [0, 0, 0, -25], // 文字靠图片右侧对齐
                },
              },
              padding: [0, 8, 0, 0], // 让整体内容偏移到左侧
            },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
          {
            type: "category",
            data: this.data.label,
            inverse: true,
            position: "left",
            axisLabel: {
              inside: true,
              verticalAlign: "bottom",
              lineHeight: 36,
              margin: 4,
              formatter: (value) => {
                let k = this.data.label.indexOf(value);
                let index = k < 9 ? k + 1 : k + 1;
                // return `{b|No.${index}} {a|${value}}`;
                return `{a|${value}}`;

              },
              rich: {

                a: {
                  fontSize: 14,
                  color: "#fff",
                  padding: [0, 0, 0, -5],
                },
              },
            },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
          {
            type: "category",
            data: this.data.label,
            inverse: true,
            axisLabel: {
              inside: true,
              verticalAlign: "bottom",
              lineHeight: 34,
              margin: 2,
              formatter: (value) => {
                let k = this.data.label.indexOf(value);
                return `{a|${this.data.value[k]}人}`;
              },
              rich: {
                a: {
                  fontSize: 16,
                  color: "#fff",
                  padding: [4, 0, 0, 0],
                  fontFamily: "DOUYU",
                },
              },
            },
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          },
        ],
        series: [
          {
            data: this.data.value,
            type: "bar",
            yAxisIndex: 0,
            barWidth: 8,
            showBackground: true,
            itemStyle: {
              barBorderRadius: 8,
              color: (params) => {
                return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: "#00D0FF" },
                    { offset: 1, color: "#00A8FF" },
                  ],
                };
              },
            },
            z: 1,
          },
          // {
          //   name: "外框",
          //   type: "bar",
          //   yAxisIndex: 0,
          //   data: this.data.value1,
          //   barWidth: 12,
          //   itemStyle: {
          //     normal: {
          //       color: "#00A8FF",
          //       barBorderRadius: 5,
          //     },
          //   },
          //   z: 0,
          // },
        ],
      };
    },
    startMoveDataZoom() {
      this.dataZoomMoveTimer = setInterval(() => {
        this.dataZoomMove.start += 1;
        this.dataZoomMove.end += 1;
        if (this.dataZoomMove.end > this.data.value.length - 1) {
          this.dataZoomMove.start = 0;
          this.dataZoomMove.end = 5;
        }
        this.myChart.setOption({
          dataZoom: [
            {
              type: "slider",
              startValue: this.dataZoomMove.start,
              endValue: this.dataZoomMove.end,
            },
          ],
        });
      }, 2500);
    },
    handleMouseOut() {
      if (this.dataZoomMoveTimer) return;
      let dataZoomMove_get = this.myChart.getOption().dataZoom[0];
      this.dataZoomMove.start = dataZoomMove_get.startValue;
      this.dataZoomMove.end = dataZoomMove_get.endValue;
      this.startMoveDataZoom();
    },
    handleMouseOver() {
      clearInterval(this.dataZoomMoveTimer);
      this.dataZoomMoveTimer = null;
    },
  },
  beforeDestroy() {
    clearInterval(this.dataZoomMoveTimer);
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
};
</script>

<style scoped>
.gender {
  margin-left: 20px;
  margin-bottom: 20px;
  width: 140px;
  height: 27px;
  background-image: url('../../../public/imgs/dsadssda.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 15px;
  text-align: left;
  line-height: 27px;
  padding-left: 10px;
}
</style>
